import { Component } from "react"
import { Card, Button } from "@mui/material"
import { Formik, Form, Field } from 'formik'
import MyTextField from '../../../components/MyForm/MyTextField'
import { withTranslation } from 'react-i18next'
import MyTable from "../../../components/MyTable/MyTable"
import TablePaginationCus from "../../../components/TablePaginationCus/TablePaginationCus"
import './index.scss'
class UserManagement extends Component{
  constructor (props) {
    super(props)
  }
  formatPhone = (value) => {
    if (value) return value
    return '--'
  }
  state = {
    initForm: {
      userName: '',
      role: '',
      mail: '',
      phone: ''
    },
    tableTitle: [
      {id: 'userName', title: '用户名'},
      {id: 'role', title: '角色名称'},
      {id: 'mail', title: '邮箱地址'},
      {id: 'phone', title: '手机号码'}
    ],
    tablePorps: [
      { read: 'userName' },
      { read: 'role' },
      { read: 'mail' },
      { read: 'phone', valueFormat: this.formatPhone }
    ],
    tableData: [
      { id: 1, userName: 'hdd1', role: '角色1', mail: '120392111@qq.com', phone: '15508999282' },
      { id: 2, userName: 'hdd2', role: '角色2', mail: '120392111@qq.com', phone: '' },
      { id: 3, userName: 'hdd3', role: '角色3', mail: '120392111@qq.com', phone: '' },
      { id: 4, userName: 'hdd4', role: '角色4', mail: '120392111@qq.com', phone: '' }
    ],
    Pagination: {
      totalCount: 100,
      currentPage: 1,
      rowsPerPage: 30
    }
  }
  search = (values, actions) => {
    console.log(values)
    console.log(actions)
  }
  formValidate = (values) => {
    console.log(values, 'formValidate')
  }
  onPageChange = (_, newPage) => {
    this.setState({
      Pagination: {
        ...this.state.Pagination,
        currentPage: newPage
      }
    })
  }
  onRowsPerPageChange = (currentPageSize) => {
    this.setState({
      Pagination: {
        ...this.state.Pagination,
        currentPage: 1,
        rowsPerPage: currentPageSize
      }
    }, () => {
      console.log(this.state)
    })
  }
  render () {
    const { t } = this.props
    return (
      <div className="UserManagement">
        <Card className="search-condition">
          <Formik initialValues={this.state.initForm} onSubmit={(values, actions) => this.search(values, actions)} validate={(values) => this.formValidate(values)}>
            {() => (
              <Form className='userSearchForm common-from'>
                <div className="formItem">
                  <Field style={{width: '100%'}} name="userName" placeholder={t('common.enterUserName')} label={t('common.userName')} component={MyTextField} />
                </div>
                <div className="formItem">
                  <Field style={{width: '100%'}} name="role" placeholder={t('userManagement.inputRole')} label={t('common.role')} component={MyTextField} />
                </div>
                <div className="formItem">
                  <Field style={{width: '100%'}} name="mail" placeholder={t('userManagement.inputMail')} label={t('common.mail')} component={MyTextField} />
                </div>
                <div className="formItem">
                  <Field style={{width: '100%'}} name="phone" placeholder={t('userManagement.inputPhone')} label={t('common.phone')} component={MyTextField} />
                </div>
                <div className="formItem">
                  <Button type="submit" variant="contained">搜索</Button>
                </div>
              </Form>
            )}
          </Formik>
        </Card>
        <Card className="table">
          <MyTable rowKey="id" tableData={this.state.tableData} tablePorps={this.state.tablePorps} tableTitle={this.state.tableTitle}></MyTable>
        </Card>
        <Card className="table">
          <TablePaginationCus
            totalCount={this.state.Pagination.totalCount}
            currentPage={this.state.Pagination.currentPage}
            rowsPerPage={this.state.Pagination.rowsPerPage}
            onPageChange={this.onPageChange}
            onRowsPerPageChange={this.onRowsPerPageChange}
          ></TablePaginationCus>
        </Card>
      </div>
    )
  }
}

export default withTranslation()(UserManagement)